<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll-snap-type</title>
</head>
<style>
    .container {
        width: 100%;
        height: 90vh;
        overflow: scroll;
        scroll-snap-type: y mandatory;
    }
    .container .item {
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
        scroll-snap-align: start;
    }
    .container .item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
<body>
<div class="container">
    <div class="item">
        <img src="https://live.staticflickr.com/65535/54421478138_9d149510e2_b.jpg" alt="test" />
    </div>
    <div class="item">
        <img src="https://live.staticflickr.com/65535/54426645115_aef7655445_b.jpg" alt="test" />
    </div>
    <div class="item">
        <img src="https://live.staticflickr.com/65535/54424692367_3d36df50a4_b.jpg" alt="">
    </div>
    <div class="item">
        <img src="https://live.staticflickr.com/65535/54421990620_962fe35bbc_b.jpg" alt="">
    </div>
    <div class="item">
        <img src="https://live.staticflickr.com/65535/54421871810_01faa98e44_b.jpg" alt="">
    </div>
    <div class="item">
        <img src="https://live.staticflickr.com/65535/53777361338_eb64b8fc5f_b.jpg" alt="">
    </div>
    <div class="item">
        <img src="https://live.staticflickr.com/65535/54424013768_42810154fb_b.jpg" alt="">
    </div>
</div>
<script>

</script>
</body>
</html>
